<template>
	<view>
		<template v-if="arctileObj">
			<view class="pro-title">
				<image class="pro-main-img"
					:src="imgUrl"
					mode="widthFix"></image>
				<view class="pro-head">
					<view class="uni-flex">
						<text class="price">¥{{arctileObj.price}}</text>
						<uni-fav :checked="isFav" @click="setFav(isFav)" :circle="true" bg-color="#B4B5B7"
							bg-color-checked="rgba(255, 90, 90, 0.08)" fg-color="#ffffff"
							fg-color-checked="#FF5A5A"></uni-fav>
					</view>
					<text class="title">{{arctileObj.title}}</text>
				</view>
			</view>
			<view class="pro-arc"><rich-text :nodes="nodes"></rich-text></view>
		</template>
		<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
	</view>
</template>

<script>
	import {
		baseurl,
		detailAppFarmProduce,
		deleteCollection,
		addCollection
	} from "@/api/user.js";
	export default {
		data() {
			return {
				isFav: false,
				parmas: '',
				arctileObj: null,
				showLoadMore: false,
				nodes: [],
				strings: '',
				imgUrl:'',
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.parmas = option.id;
			this.showLoadMore = true;
			this.detailAppFarmProduce(this.parmas);
		},
		onPullDownRefresh() {
			this.showLoadMore = true;
			this.detailAppFarmProduce(this.parmas);
			uni.stopPullDownRefresh();
		},
		methods: {
      async detailAppFarmProduce(options) {
        const res = await detailAppFarmProduce(options);
        console.log('产品详情接口响应:', res)

        // 判断接口是否成功（兼容AppResponse格式：success + rows）
        if (res.success && res.rows) {
          const product = res.rows;

          // 将后端Product数据转换为前端需要的格式
          this.arctileObj = {
            id: product.id,
            title: product.name,  // 后端name字段对应前端title
            price: product.price,
            description: product.detail,  // 后端detail字段对应前端description
            image: product.images,  // 后端images字段对应前端image
            categoryName: product.categoryName,
            viewNum: product.viewNum
          };

          console.log('转换后的产品数据:', this.arctileObj)

          // 设置详情内容
          this.nodes = this.arctileObj.description || '暂无详情';

          // 处理图片URL：取第一张图片
          if (this.arctileObj.image) {
            let imageUrl = this.arctileObj.image;
            // 如果是多张图片，用逗号分隔，取第一张
            if (imageUrl.includes(',')) {
              imageUrl = imageUrl.split(',')[0].trim();
            }
            // 图片URL已经是完整的MinIO地址，直接使用
            this.imgUrl = imageUrl;
          }
        } else {
          uni.showToast({
            title: res.message || '获取产品详情失败',
            icon: 'none'
          });
        }

        this.showLoadMore = false;
      },
			async addCollection(options){
				const res = await addCollection(options);
				if(res.success){
					uni.showToast({
						title:'收藏成功！'
					})
					this.isFav = true;
				}
			},

			async deleteCollection(options){
				const res = await deleteCollection(options);
				if(res.success){
					uni.showToast({
						title:'已取消收藏！'
					})
					this.isFav = false
				}
			},
			setFav() {
				let options = {
					serviceType:'3',
					serviceId:this.arctileObj.id
				}
				if(this.isFav){
					this.deleteCollection([options])
				}else{
					this.addCollection(options)
				}
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss">
	.pro-main-img {
		width: 100%;
		height: auto;
		display: block;
	}

	.pro-head {
		position: relative;
		margin-top: -20px;
		border-radius: 16px 16px 0 0;
		background-color: #ffffff;
		z-index: 1000;
		padding: 16px 30rpx 15px;
	}

	.pro-head .uni-flex {
		justify-content: space-between;
		align-items: center;
		height: 36px;
		line-height: 36px;
	}

	.pro-head .uni-flex .price {
		color: #FF5A5A;
		font-size: 56rpx;
		font-weight: 500;
	}

	.pro-head .uni-flex .title {
		font-weight: 500;
		font-size: 36rpx;
		color: #283241;
		line-height: 26px;
	}

	.pro-arc {
		background-color: #ffffff;
		margin-top: 15px;
		padding: 30px 30rpx;
	}

	.pro-arc .info {
		text-align: center;
		color: #9498A0;
		font-size: 28rpx;
		height: 26px;
		line-height: 26px;
		margin-bottom: 15px;
	}

	.pro-arc text {
		line-height: 52rpx;
		color: #283241;
		font-size: 28rpx;
		text-indent: 2rem;
	}

	.pro-arc rich-text image {
		width: 100%;
	}
</style>
